<template>
  <el-card>
    <!--    <el-row>-->
    <!--      <el-select v-model="value" placeholder="请选择" @change="currentSel">-->
    <!--        <el-option-->
    <!--          v-for="item in teacherCourseList"-->
    <!--          :key="item.courseId"-->
    <!--          :label="item.courseName"-->
    <!--          :value="item.courseId">-->
    <!--        </el-option>-->
    <!--      </el-select>-->
    <!--    </el-row>-->
    <el-row>
      <el-table :data="teacherCourseList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="courseName" label="课程名称"></el-table-column>
        <el-table-column prop="courseId" label="课程编号"></el-table-column>
        <el-table-column prop="userName" label="任课老师"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="截止时间"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot:default="scope">
            <div v-if="scope.row.state === 0">
              <el-tag type="info">未申请</el-tag>
            </div>
            <div v-if="scope.row.state === 1">
              <el-tag type="primary">正在审核</el-tag>
            </div>
            <div v-if="scope.row.state === 2">
              <el-tag type="success">已通过</el-tag>
            </div>
            <div v-if="scope.row.state === 3">
              <el-tag type="danger">被拒绝</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="courseType" label="课程类型">
          <template v-slot:default="scope">
            <div v-if="scope.row.courseType === '1'">
              必修
            </div>
            <div v-if="scope.row.courseType === '2'">
              选修
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180px">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="申请" placement="top" :enterable="false">
              <el-button @click="applyCourse(scope.row)" type="primary"
                         icon="el-icon-s-promotion" size="small"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="取消申请" placement="top"
                        :enterable="false">
              <el-button @click="deleteApplyCourse(scope.row)" type="danger"
                         icon="el-icon-delete"
                         size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--申请课程对话框-->
    <el-dialog title="申请课程" :visible.sync="applyCourseFormVisible">
      <el-form ref="applyCourseForm" :inline="true" :model="applyCourseForm">
        <el-form-item label="是否团队">
          <el-switch v-model="applyCourseForm.isTeam"></el-switch>
        </el-form-item>
        <el-form-item v-if="applyCourseForm.isTeam" label="团队成员">
          <el-select v-model="teammate" multiple placeholder="请选择">
            <el-option
              v-for="item in stuList"
              :key="item.userId"
              :label="item.username"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyCourseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmApplyCourse">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      teacherCourseList: [],
      teacherCourse: '',
      applyCourseFormVisible: false,
      stuList: [],
      teammate: [],
      applyCourseForm: {
        isTeam: false
      },
      team: ''
    }
  },
  created () {
    this.getTeacherCourseList()
  },
  methods: {
    async getTeacherCourseList () {
      const { data: res } = await this.$http.post('/queryOpenedCourses')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取课程信息失败')
      const teacherCourseList = res.data
      this.teacherCourseList = teacherCourseList.data
    },
    async getStuList () {
      const { data: res } = await this.$http.post('/getStus')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取学生信息失败')
      this.stuList = res.data
      console.log(this.stuList)
    },
    async applyCourse (row) {
      this.applyCourseFormVisible = true
      this.teacherCourse = row
      await this.getStuList()
    },
    async confirmApplyCourse () {
      const flag = this.applyCourseForm.isTeam
      if (flag) {
        this.teacherCourse.team = this.teammate.toString()
      }
      const { data: res } = await this.$http.post('/applyCourse', this.teacherCourse)
        .catch((error) => {
          console.log(error)
          this.$message.error('请不要重复申请')
        })
      if (res.status === 200) {
        this.$message.success('申请成功')
        await this.getTeacherCourseList()
        this.applyCourseFormVisible = false
      }
      if (res.status !== 200) this.$message.error('申请失败')
    },
    async deleteApplyCourse (row) {
      // console.log(row.courseId)
      const flag = await this.$confirm('确认要取消申请吗?')
      if (flag) {
        const { data: res } = await this.$http.post('/deleteApplyCourse', {
          courseId: row.courseId,
          userId: row.userId
        })
          .catch((error) => {
            console.log(error)
            this.$message.error('网络连接超时')
          })
        if (res.status === 200) {
          this.$message.success('成功取消申请')
          await this.getTeacherCourseList()
        }
        if (res.status !== 200) this.$message.error('取消失败')
      }
    }
  }
}
</script>

<style scoped>

</style>
